<template>
	<header class="storey-title">
		<div class="left">
			<img class="left-img" src="@/assets/image/recommend/推广.png" alt="" />
			<div class="name">{{ title }}</div>
		</div>
		<div class="right">
			<div class="updateBtn">
				<i class="iconfont icon-huanyihuan"></i>
				<span>换一换</span>
			</div>
			<div class="updateBtn" @click="toDetail">
				<span>更多</span>
				<i class="iconfont icon-xiangyou1"></i>
			</div>
		</div>
	</header>
</template>

<script>
export default {
	// 推荐头部
	name: "StoreyTitle",
	props: {
		title: {
			type: String,
			require: true,
		},
	},
	methods: {
		toDetail() {
			this.$router.push({
				name: "Video",
				query: {
					title: this.title,
				},
			});
			console.log(this.$route);
		},
	},
};
</script>

<style lang="less">
.storey-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
	width: 1000px;
	height: 32px;
	.left {
		display: flex;
		img {
			width: 36px;
			height: 36px;
			vertical-align: middle;
		}
		.name {
			margin-right: 20px;
			vertical-align: bottom;
			font-size: 20px;
			line-height: 36px;
			color: #212121;
			cursor: pointer;
			&:hover {
				color: #00aeec;
			}
		}
		.text-info {
			line-height: 36px;
			a {
				color: #505050;
				font-size: 12px;
			}
			.iconfont {
				color: red;
			}
		}
	}
	.right {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-right: 10px;
		.updateBtn {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 8px 12px;
			line-height: 16px;
			font-size: 13px;
			border: 1px solid silver;
			margin-left: 10px;
			border-radius: 7px;
			cursor: pointer;
			.icon-huanyihuan {
				font-size: 20px;
			}
			&:hover {
				background-color: #eee;
				color: #00aeec;
			}
		}
	}
}
</style>
